<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/estilos.css"/>
        <script src="aoj/aojcanvas.js"></script>
        <script src="aoj/aojinput.js"></script>
        <script src="aoj/aojgame.js"></script>
        <script src="aoj/perfect-pixel.js"></script>
        <script>
            var _lastMilisecond = 0;
            var _updatesCount = 0;
            var _updatesInLastSecond = 0;
            var _lastUpdateMilisecond = 0;
            var _frameCount = 0;
            var carro = {
                x: 400,
                y: 300,
                speed: 0,
                rotation: 0,
                lastX: 0,
                lastY: 0,
                sprite: aojNewImage('img/simple-travel-car.png')
            }

            var map = {
                x: 400,
                y: 300,
                speed: 0,
                rotation: 0,
                lastX: 0,
                lastY: 0,
                sprite: aojNewImage('img/map.bmp')
            }
            
            function pulse() {
                var d = new Date();
                if (d.getTime() - _lastMilisecond > 50) {
                    _lastMilisecond = d.getTime();
                    update();
                    _frameCount = 0;
                }
                _frameCount ++;
                render(_frameCount / (_aojPulsesInLastSecond / _updatesInLastSecond));
            }

            function update() {
                _updatesCount ++;
                var d = new Date();
                if (d.getTime() - _lastUpdateMilisecond > 1000) {
                    _lastUpdateMilisecond = d.getTime();
                    _updatesInLastSecond = _updatesCount;
                    _updatesCount = 0;
                }
                carro.lastX = carro.x;
                carro.lastY = carro.y;

                if (aojIsPressed(AOJ_KEY_UP) || aojIsPressed(AOJ_MOUSE)) {
                    carro.speed += 0.5;
                    if (carro.speed > 10)
                        carro.speed = 10;
                } if (aojIsPressed(AOJ_KEY_DOWN)) {
                    carro.speed -= 0.5;
                    if (carro.speed < -5)
                        carro.speed = -5;
                } else {
                    carro.speed -= 0.1;
                    if (carro.speed < 0)
                        carro.speed = 0
                }
                if (aojIsPressed(AOJ_KEY_LEFT)) {
                    carro.rotation -= Math.abs(carro.speed) / 100;
                    if (carro.rotation < 0)
                        carro.rotation = Math.PI * 2;
                }
                if (aojIsPressed(AOJ_KEY_RIGHT)) {
                    carro.rotation += Math.abs(carro.speed) / 100;
                    if (carro.rotation > Math.PI * 2)
                        carro.rotation = 0;
                }
                carro.x += Math.cos(carro.rotation) * carro.speed;
                carro.y += Math.sin(carro.rotation) * carro.speed;
                
                isPixelCollision( carro.img.da, x, y, other, x2, y2, isCentred )
            }

            function render(delta) {
                aojFillRect(0, 0, aojCanvas().width, aojCanvas().height, 'gray');
                aojDrawImageScale(map.sprite, map.x, map.y, 2, 2);

                var x = carro.lastX + ((carro.x - carro.lastX) * delta);
                var y = carro.lastY + ((carro.y - carro.lastY) * delta);
                aojDrawImageRotateScale(carro.sprite, x, y, carro.rotation, 0.5, 0.5);
                                     aojFillRect(57,5,50,20, 'blue');
                aojSetFont('');
                aojDrawText(_updatesInLastSecond + ' tps', 65, 20, 'yellow');
                for (var ww=0; ww < 100000; ww++) {
                    var qq = Math.sqrt(ww);
                    qq = Math.atan(qq);
                }
            }

            window.onload = function carregaImagem() {
                carro.sprite = aojNewImage('img/simple-travel-car.png',imagemCarregada);
                map.sprite =  aojNewImage('img/map.bmp');
            }

            function imagemCarregada() {
                aojSetPulseCallback(pulse);
                aojSetCanvas('canvas1');
                aojStartGameLoop();
            }
        </script>
    </head>
    <body>
        <div id="info">Exemplo 2 - teclado e mouse (novo game loop).</div>
        <canvas id="canvas1" width="960" height="600"></canvas>
    </body>
</html>
